<script setup>
import InquiryComponent from "@/views/ConsultingPrices/component/InquiryComponent.vue"
import ContactComponent from "@/views/ConsultingPrices/component/ContactComponent.vue"
import { ref, reactive, computed, onMounted } from 'vue';

const requireImage = (url) => {
  return new URL(url, import.meta.url).href
}
const inquiryType = reactive(["Detailed inquiry", "Rough inquiry"])
let activeType = ref("Detailed inquiry")
let changeInquiryType = (item) => {
  activeType.value = item
}
let showContact = ref(false)
const handleContact = () => {
  console.log(showContact.value)
  showContact.value = !showContact.value
}
</script>
<template>
  <div class="consulting-prices">
    <div class="top-con">
      <img src="@/assets/images/consulting-prices.png" alt="">
      <div class="text">Consulting prices</div>
    </div>
    <div class="price-form">
      <div class="form-main">
        <div class="title-one title-pub">Inquiry Details</div>
        <div class="inquiry-type">
          <div :class="['btn', item === activeType ? 'active-btn' : '']" v-for="(item, index) in inquiryType"
            :key="index" @click="changeInquiryType(item)"> {{ item }}</div>
        </div>
        <div class="desc">
          <span v-show="activeType === 'Detailed inquiry'">Post a 'Detailed inguiry" for greater exposure, enabling
            better-matched agents and higher-quality quotes.</span>
          <span v-show="activeType === 'Rough inquiry'">Post a "Rough Inquiry" by filling in key information only,
            allowing for fast offer matching with gents.</span>
        </div>
        <InquiryComponent></InquiryComponent>

        <div class="title-one title-pub">
          <span>Contact information</span>
          <img :class="{ 'up-arrow': showContact }" src="@/assets/images/down-arrow.png" alt="" @click="handleContact">
        </div>
        <ContactComponent v-show="showContact"></ContactComponent>

      </div>
      <div class="submit-btn">
        <el-button type="primary">Submit</el-button>
      </div>
    </div>
  </div>
</template>
<style scoped lang='scss'>
.consulting-prices {
  background: #fff;
  .top-con {
    height: 300px;
    position: relative;

    img {
      height: 100%;
    }

    .text {
      font-weight: bold;
      font-size: 30px;
      color: #fff;
      width: 100%;
      height: 300px;
      position: absolute;
      left: 0;
      top: 0px;
      background: linear-gradient(91deg, rgba(91, 16, 142, 0.52) 0%, rgba(91, 16, 142, 0) 100%);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .price-form {
    width: 100%;
    background: #fff;
    .form-main {
      max-width: 1200px;
      width: 1200px;
      margin: 0 auto;

      .title-pub {
        font-weight: bold;
        padding: 40px 0px 31px 0px;
        font-size: 32px;
        color: #333;
        border-bottom: 1px solid #E5E5E5;

        img {
          cursor: pointer;
          width: 26px;
          height: 26px;
          margin: 0px 0px 0px 8px;
        }

        .up-arrow {
          transform: rotate(180deg);
        }
      }

      .inquiry-type {
        display: flex;
        margin: 29px 0px 18px 0px;

        .btn {
          color: #333;
          width: 177px;
          height: 51px;
          background: #EAEAEA;
          border-radius: 99px;
          font-size: 18px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 0px 19px 0px 0px;
          cursor: pointer;

          &:hover {
            color: #fff;
            background: #5B108E;
          }
        }

        .active-btn {
          color: #fff;
          background: #5B108E;
        }
      }

      .desc {
        font-size: 14px;
        color: #999999;
        margin: 0px 0px 30px 0px;
      }
    }
  }

  :deep(.submit-btn) {
    padding: 55px 0px 102px 0px;
    display: flex;
    justify-content: center;

    .el-button {
      font-weight: bold;
      font-size: 18px;
      width: 274px;
      height: 67px;
      background: #5B108E;
      border-radius: 0px;
      border: none;
    }
  }
}
</style>
